<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>动画animation Example</title>
        <meta name="auther" content="wangjiale"/>
        <meta name="description" content="A simper example"/>
        <link rel="shortcut icon" herf="favicon.ico" type="image/x-icon"/>
        <style>
            p{
                padding:5px;
                border:medium double black;
                background-color:lightgray;
                font-family:sans-serif;
            }
            #banana{
                font-size:large;
                border:medium solid black;
            }
            #banana:hover{
                animation-delay:100ms;
                animation-duration:250ms;
                animation-iteration-count:2;
                animation-timing-function:linear;
                animation-name:"GrowShrink";
                animation-direction:alternate;
                -webkit-animation-delay:100ms;
                -webkit-animation-duration:250ms;
                -webkit-animation-iteration-count:2;
                -webkit-animation-timing-function:linear;
                -webkit-animation-name:"GrowShrink";
                -webkit-animation-direction:alternate;

            }
            @keyframes GrowShrink{
                to{
                    font-size:x-large;
                    border:medium solid white;
                    background-color:green;
                    padding:4px;
                }
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruil-there are over 500 
            varieties of <span id="banana">banana</span> alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are f
            aced with thousands of choices.
        </p>
    </body>
</html>